<script type="text/javascript" >
    stSocialMediaToolbox.load_tooltip();
    stSocialMediaToolbox.on_submitform('#settingForm');
    function showDiv(id){
        jQuery(id).fadeIn('fast');
    }
    function hideDiv(id){
        jQuery(id).fadeOut('fast');
    }

</script>
<?php
$showFbSetting = $option['showFbFanPage'] == 0 ? 'none' : 'block';
$showYoutubeSetting = $option['showYoutubePage'] == 0 ? 'none' : 'block';
?>
<div class="w100p bgl">
    <div class="w100p bgr p5b">
        <form class="stform" id="settingForm" action="<?php echo admin_url('/admin.php?page=' . $config['plugin_name'] . '&action=' . $current_action) ?>" method="post" >
            <ul>
                <li>
                    <label><?php _e('Show toolbar', $config['plugin_name']); ?>:</label>
                    <div>
                        <input onclick="hideDiv('.setting')" <?php echo $option['toolIsShow'] == 0 ? 'checked' : '' ?> value="0" class="required" name="data[toolIsShow]" type="radio" tabindex="1" />
                        <label><?php _e('No', $config['plugin_name']) ?></label>
                        <input onclick="showDiv('.setting')"  <?php echo $option['toolIsShow'] == 1 ? 'checked' : '' ?> value="1" class="required" name="data[toolIsShow]" type="radio" tabindex="2" />
                        <label><?php _e('Yes', $config['plugin_name']) ?></label>
                    </div>
                    <br clear="both" />
                </li>
                <div class="setting">
                    <li>
                        <label><?php _e('Show Facebook like button ', $config['plugin_name']); ?>:</label>
                        <div>
                            <input <?php echo $option['hasLikeButton'] == 0 ? 'checked' : '' ?> value="0" class="required" name="data[hasLikeButton]" type="radio" tabindex="4" />
                            <label><?php _e('No', $config['plugin_name']) ?></label>
                            <input <?php echo $option['hasLikeButton'] == 1 ? 'checked' : '' ?> value="1" class="required" name="data[hasLikeButton]" type="radio" tabindex="5" />
                            <label><?php _e('Yes', $config['plugin_name']) ?></label>
                        </div>
                        <br clear="both" />
                    </li>
                    <li>
                        <label><?php _e('Show Facebook fan page ', $config['plugin_name']); ?>:</label>
                        <div>
                            <input onclick="hideDiv('.FbSetting')" <?php echo $option['showFbFanPage'] == 0 ? 'checked' : '' ?> value="0" class="required" name="data[showFbFanPage]" type="radio" tabindex="4" />
                            <label><?php _e('No', $config['plugin_name']) ?></label>
                            <input onclick="showDiv('.FbSetting')" <?php echo $option['showFbFanPage'] == 1 ? 'checked' : '' ?> value="1" class="required" name="data[showFbFanPage]" type="radio" tabindex="5" />
                            <label><?php _e('Yes', $config['plugin_name']) ?></label>
                        </div>
                        <br clear="both" />
                    </li>

                    <div class="FbSetting" style="display: <?php echo $showFbSetting ?>">
                        <li>
                            <label><?php _e('Facebook pageID ', $config['plugin_name']) ?>:</label>
                            <div class="required">
                                <input value="<?php echo $option['toolFBPageID'] ?>" class="required" name="data[toolFBPageID]" id="toolFBPageID" type="text" tabindex="3" />
                            </div>
                            <br clear="both" />
                        </li>                        
                    </div>
                    <li>
                        <label><?php _e('Show Youtube page ', $config['plugin_name']); ?>:</label>
                        <div>
                            <input onclick="hideDiv('.youtubeSetting')" <?php echo $option['showYoutubePage'] == 0 ? 'checked' : '' ?> value="0" class="required" name="data[showYoutubePage]" type="radio" tabindex="4" />
                            <label><?php _e('No', $config['plugin_name']) ?></label>
                            <input onclick="showDiv('.youtubeSetting')" toggleDiv('.youtubeSetting') <?php echo $option['showYoutubePage'] == 1 ? 'checked' : '' ?> value="1" class="required" name="data[showYoutubePage]" type="radio" tabindex="5" />
                                   <label><?php _e('Yes', $config['plugin_name']) ?></label>
                        </div>
                        <br clear="both" />
                    </li>
                    <div class="youtubeSetting" style="display: <?php echo $showYoutubeSetting ?>">
                        <li>
                            <label><?php _e('Username for YouTube', $config['plugin_name']) ?>:</label>
                            <div>
                                <input value="<?php echo $option['youtubeUserName'] ?>" class="required" name="data[youtubeUserName]" id="youtubeUserName" type="text"/>
                            </div>
                            <br clear="both" />
                        </li>
                        <li>
                            <label><?php _e('Password', $config['plugin_name']) ?>:</label>
                            <div>
                                <input value="<?php echo $option['youtubePassword'] ?>" class="required" name="data[youtubePassword]" id="youtubePassword" type="text"/>
                            </div>
                            <br clear="both" />
                        </li>
                        <li>
                            <label><?php _e('YouTube channel ', $config['plugin_name']) ?>:</label>
                            <div>
                                <input value="<?php echo $option['youtubeChannel'] ?>" class="required" name="data[youtubeChannel]" id="youtubeChannel" type="text"/>
                            </div>
                            <br clear="both" />
                        </li>
                    </div>
                </div>
                <li>
                    <input type="submit" value="Submit"/>
                </li>

            </ul>
        </form>
    </div>
</div>